<!-- 内容管理菜单专属 -->
<template>
  <div class="sidebar-menu">
    <div class="menu-box" v-if="secondMenus.length > 0">
      <el-tree
        ref="menuTree"
        :data="secondMenus"
        :props="treeProps"
        :check-on-click-node="true"
        node-key="path"
        :current-node-key="currentMenu"
        :default-expanded-keys="currentMenuKeys"
        @node-click="handleClickNode"
      >
        <template #default="{ node, data }">
          <div class="menu-with-icon">
            <span>{{ data.title }}</span>
            <i v-if="node.level !== 2 && data.children" class="iconfont">&#xe601;</i>
          </div>
        </template>
      </el-tree>
    </div>
  </div>
</template>

<script setup>
import { defineProps, computed, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { findParent } from '@ruifox-cms/utils'
import { useStore } from 'vuex'

const store = useStore()
const router = useRouter()
const props = defineProps({
  baseRoute: Array
})
// SidebarMenu只展示二级三级导航

// 过滤menu只显示二三级
// 传入整个menu  返回二三级menu
const filterMenus = menus => {
  menus = JSON.parse(JSON.stringify(menus))
  menus.forEach(item => {
    if (item.children && item.children.length > 0 && item.type === 1) {
      item.children.forEach(third => {
        if (third.children && third.children.length > 0) delete third.children
      })
    } else if (item.type === 2) {
      delete item.children
    }
  })
  // 排除内容管理、工作台、我的内容
  const excludes = ['/content/manage', '/content/workStation', '/content/my']
  menus = menus.filter(item => !excludes.some(excludedPath => item.path === excludedPath))
  return menus
}

// 查找栏目路径中type === 2 的path
const findLeafNode = matched => {
  for (let i = 0; i < matched.length; i++) {
    if (matched[i].type === 2) {
      if (process.env.NODE_ENV === 'development') return matched[i].path
    }
  }
}
const Menus = computed(() => {
  return store.getters.menus
})
const secondMenus = computed(() => {
  return filterMenus(props.baseRoute)
})
const menuTree = ref()
//currentMenu  根据当前path,递归往上查找对应(叶子节点，三级菜单或者type === 2)
const currentMenu = ref(findLeafNode(findParent(Menus.value, router.currentRoute.value.meta.id)))
const currentMenuKeys = computed(() => {
  return router.currentRoute.value.matched.map(currentValue => {
    return currentValue.path
  })
})
// 监听路由
watch(
  () => router.currentRoute.value,
  newVal => {
    currentMenu.value = findLeafNode(findParent(Menus.value, newVal.meta.id))
  }
)
const treeProps = {
  children: 'children',
  label: function (data) {
    return data.title
  },
  class: function (data, node) {
    if (node.isLeaf) {
      if (node.level === 1) {
        return 'leaf-menu first-menu'
      } else {
        return 'leaf-menu'
      }
    } else {
      return 'group-menu'
    }
  }
}
const handleClickNode = (target, attr) => {
  if (attr.isLeaf) {
    //路由跳转并高亮菜单
    router.push({ path: target.path })
  } else {
    //不允许选中父节点
    menuTree.value.setCurrentKey(currentMenu.value)
  }
}
</script>

<style scoped lang="scss">
.sidebar-menu {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: $backBase;
  h2.first-menu {
    font-size: 20px;
    padding: 25px 0 0 20px;
    margin-bottom: 20px;
  }
  .menu-box {
    .el-tree {
      background-color: inherit;
      ::v-deep .group-menu .el-tree-node__content {
        height: 60px;
        vertical-align: bottom;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
      }
      ::v-deep(.first-menu) {
        &:last-of-type {
          margin-bottom: 10px !important;
        }
      }
      ::v-deep(.first-menu:last-of-type) {
        margin-bottom: 10px !important;
      }
      .first-menu:last-of-type {
        margin-bottom: 10px !important;
      }
      ::v-deep .leaf-menu .el-tree-node__content {
        height: 36px;
      }
      ::v-deep .el-tree-node:focus > .el-tree-node__content {
        background-color: inherit;
      }
      ::v-deep .group-menu .el-tree-node__content .el-tree-node__label {
        @include menuText_1();
      }
      ::v-deep .leaf-menu .el-tree-node__content .el-tree-node__label {
        @include menuText_2();
      }
      ::v-deep .leaf-menu.first-menu .el-tree-node__content .el-tree-node__label {
        @include menuText_1();
        font-weight: normal;
      }
      ::v-deep .leaf-menu.is-current .el-tree-node__content .el-tree-node__label {
        color: $mainColor;
        font-weight: bold;
      }
      ::v-deep .el-tree-node__content > .el-tree-node__expand-icon {
        display: none;
      }
      // 无子菜单的二级菜单
      ::v-deep .leaf-menu .menu-with-icon {
        line-height: 37px;
        position: relative;
        &::before {
          position: absolute;
          content: '';
          top: -13px;
          left: 50%;
          transform: translateX(-50%);
          width: 110%;
          height: 1px;
          background: rgb(170, 170, 170, 0.3);
        }
      }
      // 有子菜单的二级菜单
      ::v-deep .group-menu .menu-with-icon {
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        line-height: 40px;
        position: relative;
        &::before {
          position: absolute;
          content: '';
          top: -12px;
          left: 50%;
          transform: translateX(-50%);
          width: 110%;
          height: 1px;
          background: rgb(170, 170, 170, 0.3);
        }
      }
      // 取消三级菜单下划线样式
      ::v-deep .el-tree-node__children {
        .menu-with-icon {
          // border-top: none;
          background: none;
          line-height: 40px;
          &::before {
            display: none;
          }
        }
      }
      ::v-deep .el-tree-node__content .el-tree-node__label {
        width: 100%;
        padding: 10px 20px;
      }
      ::v-deep .iconfont {
        transition: all 0.3s;
      }
      ::v-deep .is-expanded .iconfont {
        transform: rotate(180deg);
      }
    }
  }
}
</style>
